<template>
  <view class="honor-box">
    <text class="title" v-if="showTitle">
      {{ honorTitle }}
    </text>
    <view class="tabs">
      <up-tabs
          :current="currentIdx"
          :list="tabList"
          :item-style="tabItemStyle"
          :line-height="rpx2px(11)"
          :line-width="rpx2px(88)"
          :lineColor="'#00B588'"
          @change="handleTabClick"
            :activeStyle="{
              color: '#303133',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
            }"
      />
    </view>
    <view class="container">
      <slot></slot>
    </view>
  </view>
</template>
<script setup>
import {defineProps, defineEmits} from 'vue'
import {rpx2px} from "@/utils/utils";
const props = defineProps({
  showTitle: {
    type: Boolean,
    default: true
  },
  honorTitle: {
    type: String,
    default: ''
  },
  tabList: {
    type: Array,
    default: []
  },
  currentIdx: {
    type: Number,
    default: 0
  }
})

const emits = defineEmits(['tabClick'])
const handleTabClick = ev => {
  emits('tabClick',ev)
}

const tabItemStyle = {
  flex: 1,
  fontFamily: 'ali-p',
  fontSize: '31rpx',
  height: '80rpx!important'
}
</script>
<style scoped lang=less>
.honor-box {
  width: 100vw;
  background-color: @color-origin-white;
  padding: 27rpx 32rpx 30rpx 31rpx;
  box-sizing: border-box;
  font-family: 'ali-p';
  font-size: 31rpx;

  .title {
    font-weight: 500;
    color: @color-black-text;
  }
  .tabs {
    :deep(.u-tabs__wrapper__nav__item) {
      position: relative;
      .u-tabs__wrapper__nav__item__text {
        font-family:'ali-p';
        font-size: 31rpx;
      }
      .u-badge--not-dot {
        position: absolute;
        right: 0;
        top: 0;
        background-color: @color-orange-badge;
        width: 24rpx;
        height: 18rpx;
        border-radius: 10rpx;
        font-family: 'ali-p';
        font-size: 20rpx;
        text-align: center;
        padding: 2rpx 7rpx;
        display: flex;
        justify-content: center;
      }
    }
  }
  .container {
    margin-top: 26rpx;
    justify-content: center;
    box-sizing: border-box;
    :deep(.honor-list) {
      display: flex;
      justify-content: space-between;
      flex-wrap:wrap;
      .honor {
        width: calc(50% - 11rpx);
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 3rpx;
        border: 1px solid @color-green;
        font-family: 'ali-p';
        font-size: 23rpx;
        color: @color-green-text;
        margin-bottom: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
